<!--短信或密码登录页面-->
<template>
<div class="body flex-column">
<!--	<view class='bind-title'>绑定手机号</view>-->
<!--	<view class="input-box">-->
<!--		<span>+86</span> <input type="text" value=""  class="input-phone" placeholder="请输入新手机号"/>-->
<!--	</view>-->
<!--	<view class="input-box">-->
<!--		 <input type="text" value=""  class="input-phone" placeholder="请输入新手机号"/>-->
<!--		 <span class="input-btn">请输入验证码 </span>-->
<!--	</view>-->
<!--	<view class="btn">下一步</view>-->
  <image class='logo' :src="src"></image>
  <div class="flex-column flex-column-sb">
    	<view class="input-box">
    		<span>+86</span> <input type="number" :value="phone" @input="phoneChange" maxlength="11" class="input-phone" placeholder="请输入新手机号"/>
    	</view>

    <template v-if="pageType == 'register'">
      <view class="input-box margin-button-90">
        <input type="text" value=""  class="input-phone" @input="codeChange" placeholder="请输入验证码"/>
        <u-code :seconds="seconds" @end="end" @start="start" ref="uCode"
                @change="codeChange"></u-code>
        <span  @click="getCode" class="input-btn">{{ tips }} </span>
      </view>
      <cBtn @click = "login" text="登录"></cBtn>


      <div class="flex-row width610" >
        <span>未注册时，登录将自动注册</span>
        <span class="text-btn" @click="toggle('login')">密码登录</span>
      </div>
    </template>


    <!--密码登录-->
    <template v-if="pageType == 'login'">
      <view class="input-box margin-button-90 padding-right-20">
        <u--input type="password"
            placeholder="请输入密码"
            suffixIcon="eye-fill"
            suffixIconStyle="color: #909399"
            class="input"
            border="none"
        ></u--input>
      </view>
      <cBtn @click="loginBypwd" text="登录"></cBtn>
      <div class="flex-row width610" >
        <span class="text-btn" @click="goPage('/pages/login/loginForget')">忘记密码</span>
        <span class="text-btn" @click="toggle('register')">手机号登录</span>
      </div>
    </template>



    <div class="other-text" >—其他登录—</div>
    <image :src="src" @click="oneLogin" class="wechat-img"></image>
    <div class="flex-row agreement">

<!--      <u-checkbox-group-->
<!--          v-model="checkboxValue1"-->
<!--          placement="column"-->
<!--          shape="circle"-->
<!--          @change="radioChange"-->
<!--      >-->
<!--        <u-checkbox-->
<!--            v-for="(item, index) in radiolist1"-->
<!--            :key="index"-->
<!--            :label="item.name"-->
<!--            :name="item.value"-->
<!--        >-->
<!--        </u-checkbox>-->
<!--      </u-checkbox-group>我已仔细阅读并同意 <span>《用户协议》</span> 及 <span>《隐私政策》</span>-->
    </div>
  </div>
</div>
</template>

<script>
import Enum from "../../utils/enums"
import cBtn from "../../components/cBtn"
import {login} from "../../utils/login"
export default {
  name: "login",
  components: {
    cBtn
  },
  data() {
    return {
      logo:require("../../static/logo.png"),
      src:require("../../static/logo.png"),
      /*
      *  register 注册
      *  login 登录
      **/
      pageType:'register',
      customStyles:Enum.customStyles,
      phone:'',
      checkboxValue1:'',
      radiolist1: [{
        disabled: false,
        name:'',
        value:'选中'
      },
      ],
      radioStyle:{
        borderRadius:'50%',
        border:'none'
      },
      tips: '',
      // refCode: null,
      seconds: 10,

    };
  },
  computed: {

  },
  methods: {
    // 切换登录方式
    toggle(page){
      this.pageType = page;
    },
    goPage(url){
      uni.navigateTo({url});
    },
    radioChange(e) {
      console.log(e);
    },
    codeChange(text) {
      this.tips = text;
    },
    phoneChange(e){
      this.phone = e.detail.value
    },

    getCode() {
      console.log(this.phone);
      // 根据phone是正确的11位手机号判断是否可以获取验证码
      if(!(/^1[3456789]\d{9}$/.test(this.phone))) {
        uni.$u.toast('请输入正确的手机号');
        return;
      }

      if(this.$refs.uCode.canGetCode) {
        // 模拟向后端请求验证码
        uni.showLoading({
          title: '正在获取验证码'
        })
        setTimeout(() => {
          uni.hideLoading();
          // 这里此提示会被this.start()方法中的提示覆盖
          uni.$u.toast('验证码已发送');
          // 通知验证码组件内部开始倒计时
          this.$refs.uCode.start();
        }, 2000);
      } else {
        uni.$u.toast('倒计时结束后再发送');
      }
    },
    end() {
      uni.$u.toast('倒计时结束');
    },
    start() {
      uni.$u.toast('倒计时开始');
    },
    //登录
    login(){

    },
    //密码登录
    loginBypwd(){

    },
    //一键登录
    oneLogin(){
      console.log(123);
      login()
    }
  },
  created() {

  },
}
</script>

<style lang="scss" scoped>
@import "../../assets/css/base.scss";

  .logo{
    width: 150rpx;
    height: 150rpx;
    opacity: 1;
    margin: 50rpx auto 140rpx;
    display: inline-block;
    text-align: center;

  }
  .wechat-img{
    width: 100rpx;
    height: 100rpx;
    margin: 26rpx auto 90rpx;
  }
.body {
  color:#999999;
}

	.input-box{
		width: 606rpx;
		height: 88rpx;
		line-height: 88rpx;
		opacity: 1;
		background: #eee;
		 color: #C0C2CB;
		 border-radius: 44px;
		 display: flex;
		 margin: 20px auto 0px;
			  padding-left: 20px;
	}
	.input-phone{
		margin-left: 20rpx;
		margin-top: 24rpx;
	}
	.input-btn{

		 width: 271.99rpx;
		 height: 44rpx;
		 opacity: 1;
		 color: #7355ff;
		 text-align: right;
		 font-size: 32rpx;
		 font-weight: 0;
		 font-family: "PingFangSC-Medium";
		 line-height: 88rpx;

	}
	.btn{
		width: 606rpx;
		height: 88rpx;
		opacity: 1;
		margin: 600rpx auto 0;
		text-align: center;
		line-height: 88rpx;
		background: #7355ff;
		color: #fff;
		border-radius: 44rpx;
	}
  .flex-column-sb{
    justify-content: space-between;
  }

  .text-btn{
      //width: 12rpx;
      height: 36rpx;
      opacity: 1;
      color: #7355ff;
      text-align: right;
      font-size: 30rpx;
      font-weight: 0;
      line-height: 36rpx;
      letter-spacing: 0.63rpx;

  }
  .other-text{
    margin-top: 65rpx;
  }
  .width610{
    width: 610rpx;
    justify-content: space-between;
    margin-top: 48rpx;
  }
  .agreement{
    font-size: 24rpx;
    color:#999999;
    span{
      color: #7355ff;
      cursor: pointer;
    }
  }
  .margin-button-90{
    margin-bottom: 90rpx;
  }
  .input{
    width: 90%;
  }
</style>
